<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<!--<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">-->

		<title>工具-设置</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			.div1 {
				width: 100%;
				padding: 10px;
			}
			
			.div1 img {
				width: 30px;
			}
			
			.div2 {
				width: 100%;
				text-align: center;
				margin-top: 30px;
			}
			
			.div2 button {
				border-radius: 8px;
				padding: 5px;
				width: 90px;
				color: #00d5c5;
				background-color: #eeeeee;
				margin-left: 10px;
				margin-right: 10px;
				border: none;
				font-size: 20px;
			}
			
			.div2 .active {
				background-color: #00d5c5;
				color: #FFFFFF;
			}
			
			.div3 {
				width: 100%;
				text-align: center;
			}
			
			.div3 img {
				width: 50px;
			}
			
			.mui-input-range input[type=range] {
				width: 50%;
				border-radius: 0px;
			}
			
			.mui-input-range input[type="range"]::-webkit-slider-thumb {
				height: 15px;
				width: 15px;
				background: #00d5c5;
				border: none;
			}
			
			.div4 {
				width: 100%;
				padding: 10px;
			}
			
			.div5 {
				background-image: url(../img/bg-note-no.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin: 5px;
				padding: 5px;
			}
			
			.div4 .active {
				background-image: url(../img/bg-note-ok.png);
			}
			
			.div5 img {
				height: 50px;
			}
			
			.clock-div {
				text-align: center;
			}
			
			.clock-div canvas {
				width: 250px;
				height: 250px;
			}
			
			 ::-webkit-input-placeholder {
				color: #A4ECDE;
			}
			
			.divInput {
				position: absolute;
				text-align: center;
				top: 290px;
				width: 100%;
			}
			
			.divInput input {
				width: 100px;
				background-color: transparent;
				border: solid 1px #A4ECDE;
				border-radius: 10px;
				color: #A4ECDE;
				text-align: center;
				padding: 2px;
			}
		</style>

	</head>

	<body>
		<div class="mui-content">

			<div style="background-image: url(../img/bg-setting.png);background-size: 100% 100%;background-repeat: no-repeat;width: 100%;height: 100%;position: absolute;">
				<div class="div1">
					<img onclick="back()" src="../img/icon-back.png" />
				</div>

				<div class="clock-div">
					<canvas id="canvas" width="250px" height="250px"></canvas>
				</div>

				<div class="divInput">
					<input type="number" placeholder="自定义速度" />

				</div>

				<div class="div2">
					<button id="button-start" onclick="startAudio()" class="active">开始</button>
					<button id="button-end" onclick="endAudio()">停止</button>
				</div>
				<div class="div3">

					<div class="mui-input-row mui-input-range flex v-center h-center">
						<img src="../img/icon-volume.png" />
						<input type="range" id='inline-range' value="20" min="0" max="100">
					</div>
				</div>

				<div class="div4 flex v-center h-center">
					<div id="phonetic01" onclick="onPhonetic('phonetic01')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic02" onclick="onPhonetic('phonetic02')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic03" onclick="onPhonetic('phonetic03')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic04" onclick="onPhonetic('phonetic04')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic05" onclick="onPhonetic('phonetic05')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
				</div>

				<div class="div4 flex v-center h-center">
					<div id="phonetic06" onclick="onPhonetic('phonetic06')" class="div5 flex-1 flex  v-center h-center active">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic07" onclick="onPhonetic('phonetic07')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic08" onclick="onPhonetic('phonetic08')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic09" onclick="onPhonetic('phonetic09')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
					<div id="phonetic10" onclick="onPhonetic('phonetic10')" class="div5 flex-1 flex  v-center h-center">
						<img src="../img/note-01.png" />
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/drawclock.js"></script>
		<script src="../js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		
		<script>
			mui.init();

			startdraw(todohtings);
			/**
			 * 写实际代码
			 */
			function todohtings(num) {
				printLog("刻度是" + num);
			}

			function back() {
				mui.currentWebview.close();
			}
            var detailPage = plus.webview.getWebviewById("html/instrument.html");
			function startAudio() {
				document.getElementById('button-start').className = 'active';
				document.getElementById('button-end').className = '';

                
				// var detailPage = plus.webview.getLaunchWebview();
				
				 printLog(detailPage+"-------");
				 var id = 666;
				  //触发详情页面的newsId事件
				  mui.fire(detailPage,'start',{
				    id:id
				  });  
			}
			
           
			function endAudio() {
				document.getElementById('button-end').className = 'active';
				document.getElementById('button-start').className = '';
                mui.fire(detailPage,'stop',{
				    
				 }); 
                
			}
			//滑动条的监听
			document.getElementById('inline-range').addEventListener('input', function() {
				printLog("音量大小" + this.value);
			});

			//音标的点击事件
			function onPhonetic(id) {
				deleteClass(id);
				if(id == "phonetic01") {
					printLog("1");

				} else if(id == "phonetic02") {
					printLog("2");
				} else if(id == "phonetic03") {
					printLog("3");
				} else if(id == "phonetic04") {
					printLog("4");
				} else if(id == "phonetic05") {
					printLog("5");
				} else if(id == "phonetic06") {
					printLog("6");
				} else if(id == "phonetic07") {
					printLog("7");
				} else if(id == "phonetic08") {
					printLog("8");
				} else if(id == "phonetic09") {
					printLog("9");
				} else if(id == "phonetic10") {
					printLog("10");
				}
			}
			//删除被选中的active属性
			function deleteClass(id) {
				var arr = document.getElementsByClassName("div5");
				printLog(arr.length);
				for(var i = 0; i < arr.length; i++) {
					arr[i].classList.remove("active");
				}
				document.getElementById(id).classList.add("active");
			}
		</script>
	</body>

</html>